﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/raphael.js" type="text/javascript"></script>
    <script src="js/Chart3D-1.1.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        $(function () {
            var chat_type = "column",
            chat_title = "Monthly Average Rainfall",
            chat_x = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            chat_Data = [{ name: 'Tokyo', stack: 'male',
                data: [49.9, 71.5, 106.4, 199, 144.0, 176.0, 135.6, 148.5, 111.4, 194.1, 95.6, 54.4]
            }, {
                name: 'New York', stack: 'male',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
            }, {
                name: 'London',
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
            }, {
                name: 'Berlin',
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
            }];
            ChatShow("Div1", chat_type, chat_title, chat_x, chat_Data);
        });
        function ChatShow(ContainerID, chat_type, chat_title, chat_x, chat_Data) {
            var chart;
            chart = new $.Chart3D({
                chart: {
                    renderTo: ContainerID,
                    type: chat_type
                },
                title: {
                    text: chat_title,
                    x: -20 //center
                },
                credits: {//隐藏超链接
                    enabled: false
                },
                xAxis: {
                    categories: chat_x
                },
                yAxis: {
                    title: {
                        text: '百分比(%)'
                    },
                    formatter: function () {
                        return this.value + " %"
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',//显示柱状堆
                        pointPadding: 5
                    }
                },
                series: chat_Data
            });
        }                    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="Div1"  style="height:500px;">
    </div>
</form>
</body>
</html>
